<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/header.jsp" %>
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar">
        <div class="wu-toolbar-button">
            <%@include file="../common/menus.jsp" %>
        </div>
    </div>
    <!-- End of toolbar -->
    <div style="display: flex; flex-direction: column">
        <div style="width: 98%; display: flex; flex-direction: row">
            <div>
                <div class="easyui-accordion" style="width:500px;height:300px;">
                    <div title="预约统计分析" iconCls="icon-chart-curve">
                        <div id="book_chart" style="width: 98%;height:270px; padding-left: 8px;"></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="easyui-accordion" style="width:500px;height:300px;">
                    <div title="房间空闲情况分析" iconCls="icon-chart-curve">
                        <div id="room_chart" style="width: 98%;height:270px;padding-left: 8px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 98%;">
            <div class="easyui-accordion" style="width:1000px;height:300px;">
                <div title="营业统计分析" iconCls="icon-chart-curve">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="charts-div" style="width: 98%;height:260px;padding-left: 8px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Begin of easyui-dialog -->

<%@include file="../common/footer.jsp" %>
<script type="text/javascript" src="../../resources/admin/echarts/js/echarts.common.min.js"></script>
<!-- End of easyui-dialog -->
<script type="text/javascript">
    // 初始化echarts实例
    const bookChart = echarts.init(document.getElementById('book_chart'));
    const roomChart = echarts.init(document.getElementById('room_chart'));
    const myChart = echarts.init(document.getElementById('charts-div'));

    // 设置配置项
    const myChartOption = {
        grid: {
            top: 40,
            bottom: 30,
            right: 40,
            left: 40
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            itemStyle: {
                color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgb(255, 158, 68)'
                }, {
                    offset: 1,
                    color: 'rgb(255, 70, 131)'
                }])
            },
            smooth: true
        }]
    };

    const bookChartOption = {
        grid: {
            top: 40,
            bottom: 30,
            right: '2%',
            left: '3%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                formatter: function (val) {
                    if (val.length > 4) {
                        return val.substr(0, 4) + '...';
                    }
                    return val;
                }
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#9fc4f0'
                }, {
                    offset: 1,
                    color: '#2172d2'
                }])
            },
        }]
    };

    const roomChartOption = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: [
                    {value: 2048, name: '空闲', itemStyle: {color: 'rgb(74,144,226)'}},
                    {value: 1024, name: '非空闲', itemStyle: {color: 'rgb(245,166,35)'}},
                ]
            }
        ]
    };

    $(document).ready(function () {
        statsByDay();
    });


    function statsByMonth() {
        getData('month');
    }

    function statsByDay() {
        getData('day');
    }

    function getData(type) {
        $.ajax({
            url: 'get_stats',
            type: 'post',
            dataType: 'json',
            data: {type: type},
            success: function (data) {
                if (data.type == 'success') {

                    myChartOption.xAxis.data = data.content.keyList;
                    myChartOption.series[0].data = data.content.valueList;
                    myChart.clear();
                    myChart.setOption(myChartOption);

                    let bookData = data.bookData;
                    bookChartOption.xAxis.data = mergeArray(bookData, 'name');
                    bookChartOption.series[0].data = mergeArray(bookData, 'total');
                    bookChart.clear();
                    bookChart.setOption(bookChartOption);

                    let roomData = data.roomData;
                    let roomNum = 0, avilableNum = 0;
                    roomData.forEach(obj => {
                        roomNum += obj.roomNum;
                        avilableNum += obj.avilableNum;
                    })
                    roomChartOption.series[0].data[0].value = avilableNum;
                    roomChartOption.series[0].data[1].value = roomNum - avilableNum;
                    roomChart.clear();
                    roomChart.setOption(roomChartOption);
                } else {
                    alert(data.msg)
                }
            }
        });
    }

    function mergeArray(data, key) {
        data = data || [];
        let arr = [];
        if (data.length <=0) return [];
        data.forEach(obj => arr.push(obj[key]));
        return arr;
    }

</script>